import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:jdflutter/flutter_jdshop/config/Config.dart';
import 'package:jdflutter/flutter_jdshop/model/CateModel.dart';
import 'package:jdflutter/flutter_jdshop/services/ScreenAdaper.dart';
class CategoryPage extends StatefulWidget {
  const CategoryPage({Key? key}) : super(key: key);

  @override
  _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;
  int _selectIndex = 0;
  List _leftCateList=[];
  List _rightCateList=[];

  @override
  void initState(){
    super.initState();
    _getLeftCateData();
  }

  // 左侧分类
  _getLeftCateData() async{
    var api = '${Config.domain}api/pcate';
    var result = await Dio().get(api);
    var leftCateList = new CateModel.fromJson(result.data);
    setState(() {
      this._leftCateList = leftCateList.result;
    });
    _getRightCateData(leftCateList.result[0].sId);
  }

  //右侧分类
  _getRightCateData(pid) async{
    var api = '${Config.domain}api/pcate?pid=${pid}';
    var result = await Dio().get(api);
    var rightCateList = new CateModel.fromJson(result.data);
    setState(() {
      this._rightCateList = rightCateList.result;
    });
  }

  Widget _leftCateWidget(leftWidth){
    if(this._leftCateList.length >0){
      return  Container(
          width: leftWidth,
          height: double.infinity,
          child:ListView.builder(itemBuilder: (context,index){
            return Column(
              children: [
                InkWell(
                  onTap: (){
                    setState(() {
                      _selectIndex = index;
                      this._getRightCateData(this._leftCateList[index].sId);
                    });
                  },
                  child: Container(
                    width: double.infinity,
                    height: ScreenAdaper.height(84),
                    padding: EdgeInsets.only(top: ScreenAdaper.height(24)),
                    child: Text("第${this._leftCateList[index].title}条",textAlign: TextAlign.center),
                    color: _selectIndex==index? Color.fromRGBO(240, 246, 246, 0.9):Colors.white,
                  ),
                ),
                Divider(height: 1,)
              ],
            );
          },
            itemCount: this._leftCateList.length,
          )
      );

    }else{
      return Container(
        width: leftWidth,
        height: double.infinity,
      );
    }
  }

  Widget _rightCateWidget(rightItemWidth,rightItemHeight){
    if(this._rightCateList.length > 0){
      return  Expanded(
        flex: 1,
        child: Container(
          padding: EdgeInsets.all(10),
          height: double.infinity,
          color: Color.fromRGBO(240, 246, 246, 0.9),
          child: GridView.builder(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: rightItemWidth/rightItemHeight,
                crossAxisSpacing: 10,
                mainAxisSpacing: 10
            ),
            itemBuilder: (context,index){
              //处理图片
              String pic=this._rightCateList[index].pic;
              pic=Config.domain+pic.replaceAll('\\', '/');
              return InkWell(
                onTap: (){
                  // 跳转到商品列表
                  Navigator.pushNamed(context, '/productList',arguments: {
                    "cid":this._rightCateList[index].sId
                  });
                },
                child: Container(
                  child: Column(
                    children: [
                      AspectRatio(
                        aspectRatio: 1/1,
                        child: Image.network("${pic}",fit: BoxFit.cover),
                      ),
                      Container(
                        height: ScreenAdaper.height(28),
                        child: Text("${this._rightCateList[index].title}"),
                      )
                    ],
                  ),
                ),
              );


            },
            itemCount: this._rightCateList.length,

          ),

        ),
      );
    }else{
      return Expanded(
          flex: 1,
          child: Container(
            padding: EdgeInsets.all(10),
            height: double.infinity,
            color: Color.fromRGBO(240, 246, 246, 0.9),
            child: Text("加载中..."),
          )
      );

    }

  }

  @override
  Widget build(BuildContext context) {
    // 计算右侧GridView宽高比
    // 左侧宽度
    var leftWidth = ScreenAdaper.getScreenWidth()/4;
    //右侧每一项宽度=（总宽度-左侧宽度-GridView外侧元素左右的Padding值-GridView中间的间距）/3
    var rightItemWidth=(ScreenAdaper.getScreenWidth()- leftWidth -20-20)/3;
    //获取计算后的高度
    var rightItemHeight=rightItemWidth+ScreenAdaper.height(28);
    return Row(
      children: [
        _leftCateWidget(leftWidth),
        _rightCateWidget(rightItemWidth,rightItemHeight)
      ],
    );
  }
}
